{% extends 'axf/base.html' %}

{% load static from staticfiles %}

{% block linkscript %}

<link rel="stylesheet" type="text/css" href="{% static 'home/css/home.css'%}" />
<script type="text/javascript" charset="utf-8" src="{% static 'home/js/home.js' %}"></script>

{% endblock linkscript %}

{% block base %}
    <div id="home">
        <!-- 轮播图 -->
        <section class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
               {% for item in wheelist %}
                    <div class="swiper-slide">
                        <a href="#" ><img src="{{ item.img }}"/></a>
                    </div>
               {% endfor %}

            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
        </section>

        <section class="topMenu">
            <nav>
                <ul>
                    {% for item in topMenu %}
                    <li>
                        <a href="#">
                            <img src="{{ item.img }}"/>
                            <span>{{ item.name }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </nav>

            <menu class="swiper-container swiperMenu" id="swiperMenu">
                <ul class="swiper-wrapper">
                    {% for item in mustbuylist %}
                    <li class="swiper-slide">
                        <a href="#">
                            <img src="{{ item.img }}" />
                        </a>
                    </li>
                    {% endfor %}

                </ul>
            </menu>
        </section>



     <section class="CVS">
        <h2>
            <img src="{{shop1.img}}" alt="{{shop1.name}}"/>
        </h2>

        <fieldset>
            {% for x in shop2 %}
                <a href="#">
                    <img src="{{x.img}}" alt="{{x.name}}"/>
                </a>
            {% endfor %}
        </fieldset>

        <ul>
            {% for x in shop3 %}
                <li>
                    <a href="#">
                        <img src="{{x.img}}" />
                        <span>{{x.name}}</span>
                    </a>
                </li>
            {% endfor %}
        </ul>

        <ol>
            {% for x in shop4 %}
                <li><a href="#"><img src="{{x.img}}" alt="{{x.name}}"/></a></li>
            {% endfor %}
        </ol>
    </section>


    <section class="mainInfo">
        {% for item in mainList%}
            <section>
                <h3>
                    {{item.name}}
                    <a ui-sref="#">更多></a>
                    <span></span>
                </h3>
                <div>
                    <a href="#"><img src="{{item.img}}" alt="item.name"/></a>
                </div>
                <ul>
                    <li>
                        <a href="#">
                            <img src="{{item.img1}}"/>
                            <span class="description">{{item.longname1}}</span>
                            <span>¥{{item.price1}}</span>
                            <s>¥{{item.marketprice1}}</s>
                        </a>
                        <button><span>&#43;</span></button>
                    </li>
                    <li>
                        <a href="#">
                            <img src="{{item.img2}}"/>
                            <span class="description">{{item.longname2}}</span>
                            <span>¥{{item.price2}}</span>
                            <s>¥{{item.marketprice2}}</s>
                        </a>
                        <button><span>&#43;</span></button>
                    </li>
                    <li>
                        <a href="#">
                            <img src="{{item.img3}}"/>
                            <span class="description">{{item.longname3}}</span>
                            <span>¥{{item.price3}}</span>
                            <s>¥{{item.marketprice3}}</s>
                        </a>
                        <button><span>&#43;</span></button>
                    </li>
                </ul>
            </section>
        {% endfor %}
    </section>


    </div>

{% endblock base %}

